<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
      情况一：
        组件有一个数据希望能够在组件内直接修改，但又期望该数据的初始值由父组件决定

      情况二：
        组件接受的prop数据需要做格式化展示时，可以在组件内处理计算属性

     -->

    <div id="app">
      <counter a="1" size="Small"></counter>

      <counter a="10" size="Default"></counter>

      <counter a="100" size="Large"></counter>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      const app = createApp({});

      app.component("Counter", {
        props: ["a", "size"],

        data() {
          return {
            count: this.a,
          };
        },

        computed: {
          formatSize() {
            return this.size.toLowerCase();
          },
        },

        template: `
          <div>
            <button @click="count++">{{ count }}</button>
            <p>Prop size: {{ size }}</p>
            <p>格式化之后的 size: {{ formatSize }}</p>
          </div>
        `,
      });

      app.mount("#app");
    </script>
  </body>
</html>
